


Snapchat Skin

by Azdaema Codes (Azdaema)



Series: Azdaema's AO3 Messaging Skins [4]
Category: AO3 fandom, No Fandom
Genre: Ao3 skins, Fanwork Research & Reference Guides, Metafiction, Work Skin
Language: English
Status: Completed
Published: 2020-05-19
Updated: 2020-05-19
Packaged: 2021-03-02 21:53:33
Rating: Teen And Up Audiences
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 2
Words: 1,016
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/24273862
Author URL: https://archiveofourown.org/users/Azdaema/pseuds/Azdaema%20Codes
Relationships: AO3 Skins & You
Series: Azdaema's AO3 Messaging Skins [4]
Series URL: https://archiveofourown.org/series/1642099
Kudos: 11





	1. Basics

### Skin
    
    
    /* Wrapper */
    .snapchat {
    	width: 100%;
    	max-width: 320px;
    	margin: auto;
    	font-family: "Avenir Next", Avenir, Arial, sans-serif;
    }
    
    /* Matching font style of both names and dates */
    .snapchat dt,
    .snapchat .day {
    	font-family: inherit;
    	text-transform: uppercase;
    	font-weight: normal;
    	letter-spacing: 1px;
    	font-size: 0.75em;
    }
    
    /* Day */
    .snapchat .day {
    	text-align: center;
    	color: #d9d9d9;
    }
    
    /* Names */
    .snapchat dt {
    	margin-top: 10px;
    }
    
    /* Texts */
    .snapchat dd {
    	margin: 0;
    	margin-left: 2px;
    	padding: 4px 10px;
    	border-left: solid 2px;
    }
    
    /* Outgoing/red */
    .snapchat .out dt {color: #e92754;}
    .snapchat .out dd {border-color: #e92754;}
    
    /* Incoming/blue */
    .snapchat .in dt {color: #3cb2e2;}
    .snapchat .in dd {border-color: #3cb2e2;}
    

### Demo
    
    
    <dl class="snapchat">
    
    <h4 class="day">Today</h4>
    
    <div class="in">
    <dt>Alice</dt>
    <dd>are you there yet?</dd>
    <dd>Where are you?</dd>
    </div>
    
    <div class="out">
    <dt>Bob</dt>
    <dd>I'm waiting outside</dd>
    <dd>wait I can see you now</dd>
    </div>
    
    </dl>

#### Today

Alice
    are you there yet?
    Where are you?

Bob
    I'm waiting outside
    wait I can see you now


	2. Icons

### Skin
    
    
    .snapchat .icon {
    	display: block;
    	width: 100%;
    	height: 2em;
    	border-radius: 4px;
    	border: 1px solid rgba(0,0,0, 0.15);
    	background: rgba(255,255,255, 0.3);
    	padding: 0.5em 0;
    }
    
    /* Image part */
    .snapchat .icon:before {
    	float: left;
    	display: inline-block;
    	margin: 0.5em;
    	background-size: 1em 1em;
    	width: 1em;
    	height: 1em;
    	content: "";
    }
    
    /* Text part */
    .snapchat .icon:after {
    	float: left;
    	display: inline-block;
    	font-weight: bold;
    	padding: 0.5em 0;
    	line-height: 1em;
    }
    
    
    /* Hidden backup */
    .snapchat .icon i {
    	display: none;
    }
    
    /*
     * Opened
     */
    .snapchat .icon.opened:after {
    	content: "Opened";
    }
    /* Outgoing (arrow) */
    .snapchat .out .icon.opened:before {       background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/Snapchat/icons/opened_red.png");}
    .snapchat .out .icon.opened.purple:before {background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/Snapchat/icons/opened_purple.png");}
    .snapchat .out .icon.opened.blue:before {  background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/Snapchat/icons/opened_blue.png");}
    /* Incoming (arrow) */
    .snapchat .in .icon.opened:before {       background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/Snapchat/icons/viewed_red.png");}
    .snapchat .in .icon.opened.purple:before {background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/Snapchat/icons/viewed_purple.png");}
    .snapchat .in .icon.opened.blue:before {  background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/Snapchat/icons/viewed_blue.png");}
    
    /*
     * Unopened
     */
    .snapchat .icon.unopened:after {
    	content: "Delivered";
    }
    /* Outgoing (arrow) */
    .snapchat .out .icon.unopened:before {       background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/Snapchat/icons/sent_red.png");}
    .snapchat .out .icon.unopened.purple:before {background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/Snapchat/icons/sent_purple.png");}
    .snapchat .out .icon.unopened.blue:before {  background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/Snapchat/icons/sent_blue.png");}
    /* Incoming (box) */
    .snapchat .in .icon.unopened:after {
    	content: "Tap to view";
    }
    .snapchat .in .icon.unopened:before {       background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/Snapchat/icons/received_red.png");}
    .snapchat .in .icon.unopened.purple:before {background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/Snapchat/icons/received_purple.png");}
    .snapchat .in .icon.unopened.blue:before {  background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/Snapchat/icons/received_blue.png");}
    
    /*
     * Screenshot
     */
    .snapchat .icon.screenshot:after {
    	content: "Screenshot!";
    }
    .snapchat .icon.screenshot:before {       background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/Snapchat/icons/screenshot_red.png");}
    .snapchat .icon.screenshot.purple:before {background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/Snapchat/icons/screenshot_purple.png");}
    .snapchat .icon.screenshot.blue:before {  background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/Snapchat/icons/screenshot_blue.png");}
    
    /*
     * Replay
     */
    .snapchat .icon.replay:after {
    	content: "Replay!";
    }
    .snapchat .icon.replay:before {       background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/Snapchat/icons/replay_red.png");}
    .snapchat .icon.replay.purple:before {background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/Snapchat/icons/replay_purple.png");}
    
    /*
     * Icon message if clicked
     */
    .snapchat.nonudes .icon:active:after {
    	font-size: 0.8em;
    	content: "[No actual nudes. Sorry. This is a fanfic.]";
    }

### Demo
    
    
    <dl class="snapchat">
    
    <div class="out">
    <dt>Aulus</dt>
    <dd><span class="icon opened"><i>Snap (without audio) sent and opened</i></span></dd>
    <dd><span class="icon opened purple"><i>Snap (with audio) sent and opened</i></span></dd>
    <dd><span class="icon opened blue"><i>Chat sent and opened</i></span></dd>
    
    <dd><span class="icon unopened"><i>Snap (without audio) sent</i></span></dd>
    <dd><span class="icon unopened purple"><i>Snap (with audio) sent</i></span></dd>
    <dd><span class="icon unopened blue"><i>Chat sent</i></span></dd>
    </div>
    
    <div class="in">
    <dt>Numerius</dt>
    <dd><span class="icon opened"><i>Snap (without audio) sent and opened</i></span></dd>
    <dd><span class="icon opened purple"><i>Snap (with audio) sent and opened</i></span></dd>
    <dd><span class="icon opened blue"><i>Chat sent and opened</i></span></dd>
    
    <dd><span class="icon unopened"><i>Snap (without audio) sent</i></span></dd>
    <dd><span class="icon unopened purple"><i>Snap (with audio) sent</i></span></dd>
    <dd><span class="icon unopened blue"><i>Chat sent</i></span></dd>
    
    <dd><span class="icon screenshot"><i>Screenshot taken of Snap (without audio)</i></span></dd>
    <dd><span class="icon screenshot purple"><i>Screenshot taken of Snap (with audio)</i></span></dd>
    <dd><span class="icon screenshot blue"><i>Screenshot taken of chat</i></span></dd>
    
    <dd><span class="icon replay"><i>Snap (without audio) has been replayed</i></span></dd>
    <dd><span class="icon replay purple"><i>Snap (with audio) has been replayed</i></span></dd>
    </div>
    
    </dl>

Aulus
    _Snap (without audio) sent and opened_
    _Snap (with audio) sent and opened_
    _Chat sent and opened_
    _Snap (without audio) sent_
    _Snap (with audio) sent_
    _Chat sent_

Numerius
    _Snap (without audio) sent and opened_
    _Snap (with audio) sent and opened_
    _Chat sent and opened_
    _Snap (without audio) sent_
    _Snap (with audio) sent_
    _Chat sent_
    _Screenshot taken of Snap (without audio)_
    _Screenshot taken of Snap (with audio)_
    _Screenshot taken of chat_
    _Snap (without audio) has been replayed_
    _Snap (with audio) has been replayed_

And to use the shitpost feature I'm so very proud of, add it to the wrapper:
    
    
    <dl class="snapchat nonudes">
    
    <div class="out">
    <dt>Aulus</dt>
    <dd>Try clicking on the icon button.</dd>
    <dd><span class="icon opened"><i>Snap (without audio) sent and opened</i></span></dd>
    </div>
    
    </dl>

Aulus
    Try clicking on the icon button.
    _Snap (without audio) sent and opened_

**Works inspired by this one:**

  * [A Year in Messages](https://archiveofourown.org/works/22854187) by [Azdaema Codes (Azdaema)](https://archiveofourown.org/users/Azdaema/pseuds/Azdaema%20Codes), [Blankfreeze1958](https://archiveofourown.org/users/Blankfreeze1958/pseuds/Blankfreeze1958)




End file.
